<template>
    <RN name="王泽荣" cTime="30" fontSize="200" isPlay="true" @complete="rn" />
    <div class="ani" id="ani">

    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import RN from "@/components/randomName.vue";
import QZ from "@/assets/qz.json"
import lottie from 'lottie-web'
const rn = (name) => {
    console.log("complete", name);
    document.querySelector(".ani").style.pointerEvents = "auto";
    window.il = lottie.loadAnimation({
        container: document.querySelector(".ani"),
        renderer: "canvas",
        loop: false,
        autoplay: true,
        animationData: QZ
    })
    // 获取il的总时长
    console.log(il.totalFrames, "总时长");
    setTimeout(() => {
        document.querySelector(".ani").innerHTML = "";
        document.querySelector(".ani").style.pointerEvents = "none";
    }, il.totalFrames * 10);
};
</script>

<style scoped>
.ani {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.1s;
    /*点击穿透*/
    pointer-events: none;
}
</style>